<!DOCTYPE html>
<!-- saved from url=(0042)http://www.bootcss.com/p/bootstrap-switch/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Bootstrap 开关（switch）控件</title>
    <meta name="author" content="Mattia Larentis">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;">
<meta name="description" content="这是一个针对Bootstrap实现的开关（switch）控件。能够支持尺寸、颜色等属性的自定义。">
  
    <link rel="stylesheet" href="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.bootcss.com/p/bootstrap-switch/static/stylesheets/bootstrapSwitch.css">
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">

    <style>
        .span4, h1 {
            text-align: center;
        }

        h1 {
            margin-bottom: 20px;
        }

        h3 {
            margin-top: 20px;
        }

        /* Bootstrap code examples
-------------------------------------------------- */

/* Base class */
.bs-docs-example {
  position: relative;
  margin: 15px 0;
  padding: 39px 19px 14px;
  *padding-top: 19px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

/* Echo out a label for the example */
.bs-docs-example:after {
  content: "Example";
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Remove spacing between an example and it's code */
.bs-docs-example + .prettyprint {
  margin-top: -20px;
  padding-top: 15px;
}
    </style>
</head>
<body style="padding-top: 50px;">

<a href="https://github.com/nostalgiaz/bootstrap-switch"><img style="position: absolute; top: 0; right: 0; border: 0;" src="./Bootstrap 开关（switch）控件_files/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

<div class="container">
<div class="row-fluid">
    <div class="span12">
        <h1>Bootstrap 开关（switch）控件
            <small>- by <a href="http://larentis.eu/">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a>
            </small>
        </h1>

    </div>
</div>

<div class="row-fluid">
    <div class="span8 offset2" style="text-align: center;">
        
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>尺寸（Size）</h3>
        <div class="bs-docs-example">
            <div class="switch switch-large has-switch">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left switch-large">ON</span><label class="switch-large">&nbsp;</label><span class="switch-right switch-large">OFF</span></div>
            </div>

            <div class="switch has-switch">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left">ON</span><label>&nbsp;</label><span class="switch-right">OFF</span></div>
            </div>

            <div class="switch switch-small has-switch">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left switch-small">ON</span><label class="switch-small">&nbsp;</label><span class="switch-right switch-small">OFF</span></div>
            </div>

            <div class="switch switch-mini has-switch">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left switch-mini">ON</span><label class="switch-mini">&nbsp;</label><span class="switch-right switch-mini">OFF</span></div>
            </div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch switch-large"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L2"><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="tag">&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L6"><span class="tag">&lt;/div&gt;</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch switch-small"</span><span class="tag">&gt;</span></li><li class="L9"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L0"><span class="tag">&lt;/div&gt;</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch switch-mini"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L4"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>颜色（Colors）</h3>
        <div class="bs-docs-example">
            <div class="switch has-switch" data-on="primary" data-off="info">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left switch-primary">ON</span><label>&nbsp;</label><span class="switch-right switch-info">OFF</span></div>
            </div>
            <div class="switch has-switch" data-on="info" data-off="success">
                <div class="switch-off switch-animate" style=""><input type="checkbox" checked=""><span class="switch-left switch-info">ON</span><label>&nbsp;</label><span class="switch-right switch-success">OFF</span></div>
            </div>
            <div class="switch has-switch" data-on="success" data-off="warning">
                <div class="switch-on" style=""><input type="checkbox" checked=""><span class="switch-left switch-success">ON</span><label>&nbsp;</label><span class="switch-right switch-warning">OFF</span></div>
            </div>
            <div class="switch has-switch" data-on="warning" data-off="danger">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left switch-warning">ON</span><label>&nbsp;</label><span class="switch-right switch-danger">OFF</span></div>
            </div>
            <div class="switch has-switch" data-on="danger" data-off="primary">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left switch-danger">ON</span><label>&nbsp;</label><span class="switch-right switch-primary">OFF</span></div>
            </div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-on</span><span class="pun">=</span><span class="atv">"primary"</span><span class="pln"> </span><span class="atn">data-off</span><span class="pun">=</span><span class="atv">"info"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L2"><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-on</span><span class="pun">=</span><span class="atv">"info"</span><span class="pln"> </span><span class="atn">data-off</span><span class="pun">=</span><span class="atv">"success"</span><span class="tag">&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L6"><span class="tag">&lt;/div&gt;</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-on</span><span class="pun">=</span><span class="atv">"success"</span><span class="pln"> </span><span class="atn">data-off</span><span class="pun">=</span><span class="atv">"warning"</span><span class="tag">&gt;</span></li><li class="L9"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L0"><span class="tag">&lt;/div&gt;</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-on</span><span class="pun">=</span><span class="atv">"warning"</span><span class="pln"> </span><span class="atn">data-off</span><span class="pun">=</span><span class="atv">"danger"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L4"><span class="tag">&lt;/div&gt;</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-on</span><span class="pun">=</span><span class="atv">"danger"</span><span class="pln"> </span><span class="atn">data-off</span><span class="pun">=</span><span class="atv">"primary"</span><span class="tag">&gt;</span></li><li class="L7"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L8"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>动画（Animation）</h3>

        <div class="bs-docs-example">
            <div class="switch has-switch" data-animated="false">
                <div class="switch-on"><input type="checkbox" checked=""><span class="switch-left">ON</span><label>&nbsp;</label><span class="switch-right">OFF</span></div>
            </div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-animated</span><span class="pun">=</span><span class="atv">"false"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L2"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>禁用（Disabled）</h3>

        <div class="bs-docs-example">
            <div class="switch has-switch deactivate">
                <div class="switch-animate switch-on"><input type="checkbox" checked="" disabled=""><span class="switch-left">ON</span><label>&nbsp;</label><span class="switch-right">OFF</span></div>
            </div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">   </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="atn">disabled</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L2"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>文本（Text）</h3>

        <div class="bs-docs-example">
            <div class="switch has-switch" data-on-label="SI" data-off-label="NO">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left">SI</span><label>&nbsp;</label><span class="switch-right">NO</span></div>
            </div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-on-label</span><span class="pun">=</span><span class="atv">"SI"</span><span class="pln"> </span><span class="atn">data-off-label</span><span class="pun">=</span><span class="atv">"NO"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L2"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>HTML文本（HTML text）</h3>

        <div class="bs-docs-example">
            <div class="switch has-switch" data-on-label="&lt;i class=&#39;icon-ok icon-white&#39;&gt;&lt;/i&gt;" data-off-label="&lt;i class=&#39;icon-remove&#39;&gt;&lt;/i&gt;">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left"><i class="icon-ok icon-white"></i></span><label>&nbsp;</label><span class="switch-right"><i class="icon-remove"></i></span></div>
            </div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">&lt;div class="switch" data-on-label="</span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'icon-ok icon-white'</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">" data-off-label="</span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'icon-remove'</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">"&gt;</span></li><li class="L1"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L2"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>事件处理（Event handler） <small>javascript</small></h3>

        <div class="bs-docs-example">
            <div id="mySwitch" class="switch has-switch">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left">ON</span><label>&nbsp;</label><span class="switch-right">OFF</span></div>
            </div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#mySwitch'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'switch-change'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></li><li class="L1"><span class="pln">    </span><span class="kwd">var</span><span class="pln"> $el </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">data</span><span class="pun">.</span><span class="pln">el</span><span class="pun">)</span></li><li class="L2"><span class="pln">      </span><span class="pun">,</span><span class="pln"> value </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">value</span><span class="pun">;</span></li><li class="L3"><span class="pln">    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> $el</span><span class="pun">,</span><span class="pln"> value</span><span class="pun">);</span></li><li class="L4"><span class="pun">});</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>Toggle State <small>javascript</small></h3>

        <div class="bs-docs-example">
            <div id="toggle-state-switch" class="switch has-switch">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left">ON</span><label>&nbsp;</label><span class="switch-right">OFF</span></div>
            </div>
            <br>
            <br>
            <div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
            <div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
            <div id="toggle-state-switch-button-off" class="btn btn-primary">OFF!</div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#toggle-state-switch'</span><span class="pun">).</span><span class="pln">bootstrapSwitch</span><span class="pun">(</span><span class="str">'toggleState'</span><span class="pun">);</span></li><li class="L1"><span class="pln">$</span><span class="pun">(</span><span class="str">'#toggle-state-switch'</span><span class="pun">).</span><span class="pln">bootstrapSwitch</span><span class="pun">(</span><span class="str">'setState'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln"> </span><span class="com">// true || false</span></li></ol></pre>
    </div>
</div>


<div class="row-fluid">
    <div class="span12">
        <h3>销毁（Destroy） <small>javascript</small></h3>

        <div class="bs-docs-example">
            
                <input type="checkbox" checked="">
            
            <br>
            <br>
            
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#destroy-switch'</span><span class="pun">).</span><span class="pln">bootstrapSwitch</span><span class="pun">(</span><span class="str">'destroy'</span><span class="pun">);</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>创建（Create） <small>javascript</small></h3>
        <div class="bs-docs-example">
            <input id="create-switch" type="checkbox" checked="">
            <br>
            <br>
            <div id="btn-create" class="btn">Create</div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#create-switch'</span><span class="pun">).</span><span class="pln">wrap</span><span class="pun">(</span><span class="str">'&lt;div class="switch" /&gt;'</span><span class="pun">).</span><span class="pln">parent</span><span class="pun">().</span><span class="pln">bootstrapSwitch</span><span class="pun">();</span></li></ol></pre>
    </div>
</div>


<div class="row-fluid">
    <div class="span12">
        <h3>禁用（Disabled） <small>javascript</small></h3>

        <div class="bs-docs-example">
            <div id="disable-switch" class="switch has-switch">
                <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left">ON</span><label>&nbsp;</label><span class="switch-right">OFF</span></div>
            </div>
            <br>
            <br>
            <button id="btn-is-active-switch" class="btn">
                Is active?
            </button>
            <button id="btn-toggle-activation-switch" class="btn">
                Toggle activation!
            </button>
            <button id="btn-disable-switch" class="btn">
                Disable!
            </button>
            <button id="btn-activate-switch" class="btn">
                Activate!
            </button>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#disable-switch'</span><span class="pun">).</span><span class="pln">bootstrapSwitch</span><span class="pun">(</span><span class="str">'isActive'</span><span class="pun">);</span></li><li class="L1"><span class="pln">$</span><span class="pun">(</span><span class="str">'#disable-switch'</span><span class="pun">).</span><span class="pln">bootstrapSwitch</span><span class="pun">(</span><span class="str">'toggleActivation'</span><span class="pun">);</span></li><li class="L2"><span class="pln">$</span><span class="pun">(</span><span class="str">'#disable-switch'</span><span class="pun">).</span><span class="pln">bootstrapSwitch</span><span class="pun">(</span><span class="str">'setActive'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln">  </span><span class="com">// true || false</span></li></ol></pre>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <h3>表单（Form） <small>- try to use tab and space</small></h3>

        <div class="bs-docs-example">
            <form class="form-horizontal span8 offset2">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="notification1">Notification 1</label>

                    <div class="controls">
                        <div class="switch has-switch" tabindex="0">
                            <div class="switch-animate switch-off"><input id="notification1" type="checkbox"><span class="switch-left">ON</span><label for="notification1">&nbsp;</label><span class="switch-right">OFF</span></div>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="notification2">Notification 2</label>

                    <div class="controls">
                        <div class="switch has-switch" tabindex="0">
                            <div class="switch-animate switch-off"><input id="notification2" type="checkbox"><span class="switch-left">ON</span><label for="notification2">&nbsp;</label><span class="switch-right">OFF</span></div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-horizontal"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-group"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">        </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label"</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputEmail"</span><span class="tag">&gt;</span><span class="pln">Email</span><span class="tag">&lt;/label&gt;</span></li><li class="L3"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"controls"</span><span class="tag">&gt;</span></li><li class="L4"><span class="pln">            </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputEmail"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Email"</span><span class="tag">&gt;</span></li><li class="L5"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></li><li class="L6"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L7"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-group"</span><span class="tag">&gt;</span></li><li class="L8"><span class="pln">        </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label"</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"notification1"</span><span class="tag">&gt;</span><span class="pln">Notification 1</span><span class="tag">&lt;/label&gt;</span></li><li class="L9"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"controls"</span><span class="tag">&gt;</span></li><li class="L0"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"0"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">                </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"notification1"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L2"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></li><li class="L4"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-group"</span><span class="tag">&gt;</span></li><li class="L6"><span class="pln">        </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label"</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"notification2"</span><span class="tag">&gt;</span><span class="pln">Notification 2</span><span class="tag">&lt;/label&gt;</span></li><li class="L7"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"controls"</span><span class="tag">&gt;</span></li><li class="L8"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"0"</span><span class="tag">&gt;</span></li><li class="L9"><span class="pln">                </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"notification2"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L0"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></li><li class="L1"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L3"><span class="tag">&lt;/form&gt;</span></li></ol></pre>
    </div>
</div>


<div class="row-fluid">
    <div class="span12">
        <h3>模态对话（Modal）</h3>

        <div class="bs-docs-example">
            <a href="http://www.bootcss.com/p/bootstrap-switch/#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
        </div>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#myModal"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="tag">&gt;</span><span class="pln">Modal</span><span class="tag">&lt;/a&gt;</span></li><li class="L1"><span class="pln">-----</span></li><li class="L2"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="tag">&gt;</span></li><li class="L4"><span class="pln">        </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L5"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></li><li class="L6"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
    </div>
</div>
<div class="well"><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" class="btn btn-primary btn-large btn-block">下载</a></div>
<p class="pull-right">
    <a href="https://twitter.com/SpiritualGuru">follow me</a> -
    <a href="http://www.larentis.eu/">my site</a>
</p>

<p>Bootstrap Switch由<a href="http://www.bootcss.com/">Bootstrap中文网</a>翻译整理</p>

</div>


<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Modal</h3>
    </div>
    <div class="modal-body">
        <div class="switch has-switch">
            <div class="switch-off switch-animate" style=""><input type="checkbox" checked=""><span class="switch-left">ON</span><label>&nbsp;</label><span class="switch-right">OFF</span></div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>



<script src="./Bootstrap 开关（switch）控件_files/jquery.min.js"></script>
<script src="./Bootstrap 开关（switch）控件_files/bootstrap.min.js"></script>
<script src="./Bootstrap 开关（switch）控件_files/prettify.js"></script>
<script src="./Bootstrap 开关（switch）控件_files/bootstrapSwitch.js"></script>
<script>
    window.prettyPrint && prettyPrint();
    $('#mySwitch').on('switch-change', function (e, data) {
        var $el = $(data.el)
            , value = data.value;
        console.log(e, $el, value);
    });

    $('#toggle-state-switch-button').on('click', function () {
        $('#toggle-state-switch').bootstrapSwitch('toggleState');
    });

    $('#toggle-state-switch-button-on').on('click', function () {
        $('#toggle-state-switch').bootstrapSwitch('setState', true);
    });

    $('#toggle-state-switch-button-off').on('click', function () {
        $('#toggle-state-switch').bootstrapSwitch('setState', false);
    });

    $('#btn-destroy-switch').on('click', function () {
        $('#destroy-switch').bootstrapSwitch('destroy');
        $(this).remove();
    });

    $('#btn-create').on('click', function () {
        $('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();
        $(this).remove()
    });

    $('#btn-is-active-switch').on('click', function () {
        alert($('#disable-switch').bootstrapSwitch('isActive'));
    });

    $('#btn-toggle-activation-switch').on('click', function () {
        $('#disable-switch').bootstrapSwitch('toggleActivation');
    });

    $('#btn-disable-switch').on('click', function () {
        $('#disable-switch').bootstrapSwitch('setActive', false);
    });

    $('#btn-activate-switch').on('click', function () {
        $('#disable-switch').bootstrapSwitch('setActive', true);
    });
</script>


    <script src="./Bootstrap 开关（switch）控件_files/projects.js"></script><script src="./Bootstrap 开关（switch）控件_files/h.js" type="text/javascript"></script>


<div id="site-navbar" style="position: absolute; top: -4px; left: -3px; border: 0; z-index: 2000;padding:0;margin:0;"><a href="http://www.bootcss.com/" title="返回首页" style="background:none;"><img src="./Bootstrap 开关（switch）控件_files/return-back.png" style="padding:0;margin:0;border:0; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;"></a></div></body></html>